<template>
  <!-- 精选类 -->
  <div class="home-selected">
    <div class="selected">
      <!-- 运动 -->
      <div class="two">
        <div class="selected-top">
          <div class="left">运动</div>
          <div class="right">
            <div class="anniu">
              <span @click="add(0)" :class="{ active: ddf == 0 }"></span>
              <span @click="add(1)" :class="{ active: ddf == 1 }"></span>
              <span @click="add(2)" :class="{ active: ddf == 2 }"></span>
              <span @click="add(3)" :class="{ active: ddf == 3 }"></span>
            </div>
            <a href="">更多></a>
          </div>
        </div>
        <div class="selected-bottom" :style="{ transform: `translateX(${-ddf * 1 * 1200}px)` }">
          <div class="neir" v-for="item, i in ziran" :key="i">
            <img :src="item.image.medium" alt="">
            <div>{{ item.title }}</div>
            <div class="sheb">设备：<span>{{ item.equipment.name }}</span></div>
            <div><img class="icont" src="../../assets/眼睛.png" alt=""> <span>{{ item.view_count }}</span> <img
                class="icont" src="../../assets/点赞_块.png" alt=""><span>{{ item.like_count }}</span></div>
            <div class="yonghu">
              <img class="toux" :src="item.user.avatar.small" alt="">
              <span>{{ item.user.name }}</span>
              <span>{{ item.created_at.split('T')[0].replace('-', '年').replace('-', '月') }}日</span>
            </div>
          </div>
        </div>
      </div>


    </div>
  </div>
</template>
  
<script setup>
import { ref, reactive } from 'vue'
import axios from 'axios'
const ddf = ref(0)
const ziran = reactive([])
// 城市
name3()
function name3() {
  axios.get('mySky/api/v2/topics/sport/works?lang=zh-Hans&platform=web&device=desktop&filter=featured:true&sort=hot&limit=16&offset=0')
    .then(res => { ziran.push(...res.data.data.items) })
}
function add(vul) {
  ddf.value = vul
}
</script>
<style scoped lang="less">
.home-selected {
  margin-top: 1px;
  padding-top: 40px;
  width: 100%;
  background-color: #e9e9e9;

  .selected {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;

    .two {
      .selected-top {
        margin: 20px;
        display: flex;
        justify-content: space-between;

        .right {
          display: flex;

          .anniu {
            margin-right: 50px;

            span {
              display: inline-block;
              margin: 0 8px;
              width: 16px;
              height: 16px;
              background-color: #d3dce6;
              border-radius: 30%;
            }

          }
        }
      }

      .selected-bottom {
        width: 4800px;
        text-align: left;
        display: flex;
        justify-content: space-between;
        transition: all .5s;

        .neir {

          line-height: 20px;
          background-color: #fff;
          div{
                width: 285px;
                overflow: hidden;
              text-overflow: ellipsis;
              white-space:nowrap;
            }
          img {
            width: 285px;
            height: 190px;
          }

          .icont {
            width: 20px;
            height: 20px;
            vertical-align: bottom;

          }

          .sheb {
            margin: 10px 0;
          }

          .yonghu {

            padding: 3px 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            span {
              font-size: 14px;
              width: 120px;
              display: inline-block;
              line-height: 30px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .toux {
              width: 30px;
              height: 30px;
              border-radius: 50%;
            }
          }
        }
      }

    }

    // 
    // 
    .two2 {
      .selected-top {
        margin: 20px;
        display: flex;
        justify-content: space-between;

        .right {
          display: flex;

          .anniu {
            margin-right: 50px;

            span {
              display: inline-block;
              margin: 0 8px;
              width: 16px;
              height: 16px;
              background-color: #d3dce6;
              border-radius: 30%;
            }

          }
        }
      }

      .selected-bottom {
        width: 4800px;
        text-align: left;
        display: flex;
        justify-content: space-between;
        transition: all .5s;

        .neir {

          line-height: 20px;
          background-color: #fff;

          img {
            width: 285px;
            height: 190px;
          }

          .icont {
            width: 20px;
            height: 20px;
            vertical-align: bottom;

          }

          .sheb {
            margin: 10px 0;
          }

          .yonghu {

            padding: 3px 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            span {
              font-size: 14px;
              width: 120px;
              display: inline-block;
              line-height: 30px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .toux {
              width: 30px;
              height: 30px;
              border-radius: 50%;
            }
          }
        }
      }

    }
  }
}
.active{
background-color: #0075f3 !important;
}
</style>